<%--
  Created by IntelliJ IDEA.
  User: 门铎
  Date: 2016/6/24
  Time: 9:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
    <!-- BOOTSTRAP STYLES-->
    <link href="${pageContext.request.contextPath}/css/bootstrap.css" rel="stylesheet" />
    <!-- FONTAWESOME STYLES-->
    <link href="${pageContext.request.contextPath}/css/font-awesome.css" rel="stylesheet" />
    <!--CUSTOM BASIC STYLES-->
    <link href="${pageContext.request.contextPath}/css/basic.css" rel="stylesheet" />
    <!-- PAGE LEVEL STYLES -->
    <link href="${pageContext.request.contextPath}/css/bootstrap-fileupload.min.css" rel="stylesheet" />
    <!--CUSTOM MAIN STYLES-->

    <link href="${pageContext.request.contextPath}/css/custom.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/css/jquery.dataTables.min.css" rel="stylesheet" />
</head>
<style>
    .title-a{
        font-size: 14px;
        color: #00b7ee;
        text-decoration: none;
    }
</style>
<body>
<div id="wrapper">
    <jsp:include page="../manage/nav-top.jsp"/>
    <jsp:include page="../manage/nav.jsp"/>
    <!-- /. NAV SIDE  -->
    <div id="page-wrapper">
        <div id="page-inner">
            <div class="row">
                <div class="col-md-12">
                    <ol class="breadcrumb">
                        <li><a href="#">首页</a></li>
                        <li class="active">编辑成员</li>
                    </ol>
                    <hr />
                </div>
            </div>
            <!-- /. ROW  -->
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group col-md-6">
                        <label>排序序号</label>
                        <input class="form-control"  type="text" id="sid" value="${member.sid}">
                        <p class="help-block"></p>
                    </div>
                    <div class="form-group col-md-6">
                        <label>姓名</label>
                        <input class="form-control"  type="text" id="name" value="${member.name}">
                        <p class="help-block"></p>
                    </div>
                    <div class="form-group col-md-6">
                        <label>职称</label>
                        <input class="form-control"  type="text" id="level" value="${member.level}">
                        <p class="help-block"></p>
                    </div>
                    <div class="form-group col-md-6">
                        <label>学历/学位</label>
                        <input class="form-control"  type="text" id="qualifications" value="${member.qualifications}">
                        <p class="help-block"></p>
                    </div>
                    <div class="form-group  col-md-6">
                        <label>办公电话</label>
                        <input class="form-control"  type="text" id="tel" value="${member.tel}">
                        <p class="help-block"></p>
                    </div>
                    <div class="form-group  col-md-6">
                        <label>E-mail</label>
                        <input class="form-control"  type="text" id="email" value="${member.email}">
                        <p class="help-block"></p>
                    </div>
                    <div class="form-group  col-md-6">
                        <label>研究方向</label>
                        <input class="form-control"  type="text" id="researchDirection" value="${member.researchDirection}">
                        <p class="help-block"></p>
                    </div>
                    <div class="form-group  col-md-6">
                        <label>办公地点</label>
                        <input class="form-control"  type="text" id="office" value="${member.office}">
                        <p class="help-block"></p>
                    </div>
                    <div class="form-group col-md-12">
                        <label>上传照片</label>
                        <div class="">
                            <div class="fileupload fileupload-new" data-provides="fileupload">
                                <div class="fileupload-preview thumbnail" style="width: 120px; height: 150px;">
                                    <img src="${pageContext.request.contextPath}${member.tou}" width="120px" height="150px"/>
                                </div>
                                <div>
                                    <span class="btn btn-file btn-success">
                                    <span class="fileupload-new">选择图片</span>
                                        <span class="fileupload-exists">换一张?</span>
                                        <input type="file" id="tou" name="tou" multiple>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group col-md-12">
                    <button class="btn btn-primary " data-toggle="modal"
                            data-target="#myModal">
                        提交基本信息
                    </button>
                        </div>
                    <hr/>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    个人详细介绍
                                            <a href="${pageContext.request.contextPath}/cimv/user/memberItemNew/${userId}">
                                                <i class="glyphicon glyphicon-plus"></i>新建
                                            </a>


                                </div>
                                <div class="panel-body">
                                    <table id="myTable" class="table table-bordered table-striped table-hover data-table">
                                        <thead>
                                        <tr>
                                            <th>排序号</th>
                                            <th>id</th>
                                            <th>列名</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <c:forEach var="mi" items="${memberItems}">
                                            <tr>
                                                <td>${mi.sid}</td>
                                                <td>${mi.id}</td>
                                                <td>${mi.itemName}</td>
                                                <td>
                                                    <a href="/cimv/user/memberItemUpdateView/${mi.id}" class="btn btn-xs btn-info">
                                                        <i class="glyphicon glyphicon-pencil"></i> 更改
                                                    </a>
                                                    <a  href="/cimv/user/memberItemDeleteView/${mi.id}/${mi.userId}" class="btn btn-xs btn-danger">
                                                        <i class="glyphicon glyphicon-remove"></i> 删除
                                                    </a>
                                                </td>
                                            </tr>
                                        </c:forEach>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 小文本编辑器列表-->

                    <!-- 模态框（Modal） -->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
                         aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close"
                                            data-dismiss="modal" aria-hidden="true">
                                        &times;
                                    </button>
                                    <h4 class="modal-title" id="myModalLabel">
                                        提示
                                    </h4>
                                </div>
                                <div class="modal-body">
                                    确定要修改当前成员么？
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default"
                                            data-dismiss="modal">关闭
                                    </button>
                                    <button  id="update"  type="button" class="btn btn-primary" data-dismiss="modal">
                                        确定
                                    </button>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal -->
                    </div>
                    <div  id="myModal2" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
                        <div class="modal-dialog modal-sm">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="exampleModalLabel">提示</h4>
                                </div>

                                <div class="modal-body">
                                    <div id="myModel2Msg" class="alert alert-success">
                                        修改成功！
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /. ROW  -->
        </div>
    </div>
    <!-- /. PAGE WRAPPER  -->
</div>
<!-- /. WRAPPER  -->

<jsp:include page="../manage/footer.jsp" />
<!-- SCRIPTS -AT THE BOTOM TO REDUCE THE LOAD TIME-->
<!-- JQUERY SCRIPTS -->
<script src="${pageContext.request.contextPath}/js/jquery-1.10.2.js"></script>
<!-- BOOTSTRAP SCRIPTS -->
<script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
<!-- METISMENU SCRIPTS -->
<script src="${pageContext.request.contextPath}/js/jquery.metisMenu.js"></script>
<!-- CUSTOM SCRIPTS -->
<script src="${pageContext.request.contextPath}/js/custom.js"></script>
<!-- PAGE LEVEL SCRIPTS -->
<script src="${pageContext.request.contextPath}/js/bootstrap-fileupload.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.ui.widget.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.iframe-transport.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.fileupload.js"></script>
<%--<!-- 配置文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/ueditor/ueditor.all.js"></script>--%>
<script src="${pageContext.request.contextPath}/js/jquery.dataTables.min.js"></script>
<script src="${pageContext.request.contextPath}/js/dateTable.boostrap.js"></script>
<script>
    $(document).ready(function(){
        $('#myTable').DataTable({
            language: {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            }
        });
    });
</script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    $(function(){
        $('#tou').change(function(){
            var arr = ".jpeg,.jpg,.png,";
            //先验证是不是图片
            var file = $(this).val();
            //获取文件后缀名
            var fileExt = file.substring(file.lastIndexOf(".")).toLowerCase();
            if(arr.indexOf(fileExt+",")==-1){
                alert("您上传的不是jpg、jpeg、png格式的图片，请重新上传！");
                $(this).val("");
                //取消掉默认fileupload上传
                return false;
            }
        });
        $('#tou').fileupload({
            url:"/cimv/user/tou",//文件上传地址，当然也可以直接写在input的data-url属性内
            /* formData:{param1:"p1",param2:"p2"},*///如果需要额外添加参数可以在这里添加
            done:function(e,result){
                //done方法就是上传完毕的回调函数，其他回调函数可以自行查看api
                //注意result要和jquery的ajax的data参数区分，这个对象包含了整个请求信息
                //返回的数据在result.result中，假设我们服务器返回了一个json对象
                //预览图片
                var html  ="<img src=\""+"${pageContext.request.contextPath}/upload/tou/" + result.result + " \" width=\"120px\" height=\" 150px\"/>";
                $('.fileupload-preview').html(html);
            }
        });
    });

    $(function(){
        $('#update').click(function () {
            var  title = $("#title").val();
            var data ={
                "name":$('#name').val(),
                "sid":$('#sid').val(),
                "level":$('#level').val(),
                "tel":$('#tel').val(),
                "email":$('#email').val(),
                "researchDirection":$('#researchDirection').val(),
                "office":$('#office').val(),
                "qualifications":$('#qualifications').val(),
                "tou":$('.fileupload-preview>img').attr("src"),
                "refId":${userId}
            }
            $.ajax({
                url: '${pageContext.request.contextPath}/cimv/user/updateDetails/',
                type: 'POST',
                dataType: 'json',
                data: data
            }).done(function(data) {
                $('#myModel2Msg').html(""+data.msg);
                $('#myModal2').modal('show');
                setTimeout(function () {
                    $('#myModal2').modal('hide');
                },1000*2);
            }).fail(function(data) {
                        console.log("error");
                    }).always(function() {
                        console.log("complete");
                    });
        });
    });
</script>


</body>

</html>
